<template>
  <ElTabs type="border-card" style="width: 100%; height: 100%;" v-model="activePane">
    <el-tab-pane label="组件属性" name="component" style="width: 100%; height: 100%;">
      <el-scrollbar always>
        <el-collapse v-model="openedItems" style="padding: 0 6px">
          <el-collapse-item name="form-item" title="FormItem配置" v-show="vFormSelectElem?.category === 'form-item'">
            <el-form
              v-if="vFormSelectElem?.formItemAttrs"
              :model="vFormSelectElem?.formItemAttrs"
              label-position="left"
              label-width="120px"
              style="padding: 5px;"
            >
              <el-form-item prop="id" label="内部名称">
                <el-input type="text" v-model="vFormSelectElem.id"></el-input>
              </el-form-item>
              <el-form-item prop="label" label="标签文本" required>
                <el-select
                    v-model="vFormSelectElem.formItemAttrs.tagId"
                    filterable
                    :filter-method="filterMethod"
                    default-first-option
                    reserve-keyword
                    placeholder="请选择标签"
                    @change="tagSelectChange"
                >
                  <el-option
                      v-for="item in filteredTagOptions"
                      :key="item.id"
                      :label="item.combinationName"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="id" label="字段名">
                <el-input type="text" v-model="vFormSelectElem.formItemAttrs.extModelField"></el-input>
              </el-form-item>
              <el-form-item prop="hiddenLabel" label="隐藏标签">
                <el-radio-group v-model="vFormSelectElem.formItemAttrs.hiddenLabel">
                  <el-radio-button :value="true">是</el-radio-button>
                  <el-radio-button :value="false">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-divider content-position="left">数据校验</el-divider>
              <el-form-item prop="required" label="是否必填">
                <el-radio-group v-model="vFormSelectElem.formItemAttrs.required">
                  <el-radio-button :value="true">是</el-radio-button>
                  <el-radio-button :value="false">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="vFormSelectElem.formItemAttrs.required" prop="requiredMessage" label="未填提示">
                <el-input v-model="vFormSelectElem.formItemAttrs.requiredMessage" />
              </el-form-item>

            </el-form>
          </el-collapse-item>
          <el-collapse-item name="component" title="组件配置">
            <component :is="configMap[vFormSelectElem?.component]" />
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane label="表单属性" name="form" style="width: 100%; height: 100%;">
      <el-scrollbar always>
        <form-config/>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane label="组件树" name="formLocateComponent" style="width: 100%; height: 100%;">
      <el-scrollbar always>
        <LocateComponent  />
      </el-scrollbar>
    </el-tab-pane>
  </ElTabs>
</template>

<script lang="ts" setup>
import {
  ElScrollbar, ElTabs, ElTabPane, ElCollapse, ElRadioGroup, ElRadioButton,
  ElCollapseItem, ElForm, ElFormItem, ElInput, ElDivider,
} from 'element-plus'
import {inject, markRaw, onMounted, ref} from "vue";
import { vFormActiveElementKey } from "@/components/form/state.key";
import NumberInputConfig from "@/components/form/designer/config/NumberInputConfig.vue";
import TextInputConfig from "@/components/form/designer/config/TextInputConfig.vue";
import SingleSelectConfig from "@/components/form/designer/config/SingleSelectConfig.vue";
import MultiSelectConfig from "@/components/form/designer/config/MultiSelectConfig.vue";
import RowConfig from "@/components/form/designer/config/RowConfig.vue";
import ColConfig from "@/components/form/designer/config/ColConfig.vue";
import DateConfig from "@/components/form/designer/config/DateConfig.vue";
import DateRangeConfig from "@/components/form/designer/config/DateRangeConfig.vue";
import UserSelectorInputConfig from "@/components/form/designer/config/UserSelectorInputConfig.vue";
import DeptSelectorInputConfig from "@/components/form/designer/config/DeptSelectorInputConfig.vue";
import SearchFormConfig from "@/components/form/designer/config/SearchFormConfig.vue";
import FormConfig from "@/components/form/designer/config/FormConfig.vue";
import LabelField from "@/components/form/components/display/LabelField.vue";
import LabelFieldConfig from "@/components/form/designer/config/LabelFieldConfig.vue";
import NormalButtonConfig from "@/components/form/designer/config/NormalButtonConfig.vue";
import DropdownSelectConfig from "@/components/form/designer/config/DropdownSelectionConfig.vue";
import AgGridConfig from  "@/components/form/designer/config/AgGridConfig.vue";
import SearchButtonConfig from "@/components/form/designer/config/SearchButtonConfig.vue";

import ResetButtonConfig from "@/components/form/designer/config/ResetButtonConfig.vue";
import AddButtonConfig from "@/components/form/designer/config/AddButtonConfig.vue";
import EditButtonConfig from "@/components/form/designer/config/EditButtonConfig.vue";
import CommitButtonConfig from "@/components/form/designer/config/CommitButtonConfig.vue";
import DeleteButtonConfig from "@/components/form/designer/config/DeleteButtonConfig.vue";
import MaintainDialogConfig from "@/components/form/designer/config/MaintainDialogConfig.vue";
import CancelButtonConfig from "@/components/form/designer/config/CancelButtonConfig.vue";
import AgGridDeleteButtonConfig from "@/components/form/designer/config/AgGridDeleteButtonConfig.vue";
import AgGridEditButtonConfig from "@/components/form/designer/config/AgGridEditButtonConfig.vue";
import LocateComponent from "@/components/common/selector/locatecomponent/ComponentSelect.vue";
import {listCombination} from "@/api/business/extmodelfieldmetadatatag";
const vFormSelectElem = inject(vFormActiveElementKey)

const activePane = ref<string>('component')
const openedItems = ref<string[]>(['form-item', 'component'])
const tagOptions= ref([])
const filteredTagOptions = ref([]); // 过滤后的选项列表
const configMap = {
  'date-picker': markRaw(DateConfig),
  'date-range-picker': markRaw(DateRangeConfig),
  'number-input': markRaw(NumberInputConfig),
  'text-input': markRaw(TextInputConfig),
  'single-select': markRaw(SingleSelectConfig),
  'multi-select': markRaw(MultiSelectConfig),
  'user-select': markRaw(UserSelectorInputConfig),
  'dept-select': markRaw(DeptSelectorInputConfig),
  'el-row': markRaw(RowConfig),
  'el-col': markRaw(ColConfig),
  'label-field': markRaw(LabelFieldConfig),
  'normal-button':markRaw(NormalButtonConfig),
  'ruoyi-el-select':markRaw(DropdownSelectConfig),
  'ruoyi-ag-grid':markRaw(AgGridConfig),
  'search-form':markRaw(SearchFormConfig),
  'search-design-button':markRaw(SearchButtonConfig),
  'add-design-button':markRaw(AddButtonConfig),
  'commit-design-button':markRaw(CommitButtonConfig),
  'edit-design-button':markRaw(EditButtonConfig),
  'delete-design-button':markRaw(DeleteButtonConfig),
  'reset-design-button':markRaw(ResetButtonConfig),
  'maintain-dialog':markRaw(MaintainDialogConfig),
  'cancel-design-button':markRaw(CancelButtonConfig),
  'ag-grid-edit-design-button':markRaw(AgGridEditButtonConfig),
  'ag-grid-delete-design-button':markRaw(AgGridDeleteButtonConfig),
}
onMounted(async () => {
  let res=   await  listCombination();
  tagOptions.value = res.data;
  filteredTagOptions.value = res.data; // 初始化过滤选项列表
})
function tagSelectChange(){
  //debugger;
  vFormSelectElem.value.formItemAttrs.extModelField = filteredTagOptions.value.find(item=>item.id==vFormSelectElem.value.formItemAttrs.tagId)?.fieldEnName;
  vFormSelectElem.value.formItemAttrs.label = filteredTagOptions.value.find(item=>item.id==vFormSelectElem.value.formItemAttrs.tagId)?.combinationName;
  //去掉表名,截断.之前字符串
  let pos  = vFormSelectElem.value.formItemAttrs.label.indexOf(".");
  if(pos>=0) {
    vFormSelectElem.value.formItemAttrs.label = vFormSelectElem.value.formItemAttrs.label.substring(pos + 1);
  }
}
// 自定义过滤方法 - 实现模糊匹配
function filterMethod(query) {
  if (!query) {
    // 如果没有查询词，显示所有选项
    filteredTagOptions.value = tagOptions.value;
  } else {
    // 根据组合名称(combinationName)进行模糊匹配
    filteredTagOptions.value = tagOptions.value.filter(item => {
      return item.combinationName.toLowerCase().includes(query.toLowerCase());
    });
  }
}

// 当下拉框显示/隐藏时重置过滤列表
function handleVisibleChange(visible) {
  if (visible) {
    filteredTagOptions.value = tagOptions.value;
  }
}
</script>

<style scoped>


</style>
